<!--
 * @Author: chengjiang
 * @Date: 2024-06-08 16:43:15
 * @Description: 
-->
<script setup lang="ts">
// 获取配置数据。
import { computed } from 'vue';
const props = defineProps<{
  msg: string
  warn: string
  hot: string
  tel: string
  address: string
  ip: string
  wxcode: string
}>()

const wxcode = computed(() => props.wxcode);
</script>



<template>
  <div style="border-top:2px solid rgb(172, 123, 56); margin-top: 10px"></div>
  <div class="grid grid-cols-4">
    <div class="greetings col-span-3">
      <!-- <h1>{{ msg }}</h1> -->
      <div v-if="warn !== ''">
        <h3 style="color: red;">{{ warn }}</h3>
      </div>
      <div v-if="hot !== ''">
        <h3>{{ hot }}</h3>
      </div>
      <h3>{{ tel }}</h3>
      <h3>地址：{{ address }}</h3>
      <h3><a href="https://beian.miit.gov.cn" style="color: rgb(186, 182, 182);">{{ ip }}</a></h3>
    </div>
    <div v-if="wxcode">
      <div class="p-3 text-center float-right" style="width: 90px;">
        <img :src="wxcode" alt="微信二维码" width="80" height="80" />
        <div class="text-[#BAB6B6]">客服微信</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 1rem;
  /* top: -10px; */
}

h3 {
  font-size: 0.9rem;
  /* margin-bottom: 5px; */
}

/* .greetings {
  padding: 0 0 10px 10px;
  background-color: rgba(48, 48, 48, 0.999);
} */

.greetings h1,
.greetings h3 {
  color: rgb(186, 182, 182);
  text-align: left;
  /* margin: 10px; */
}

/* @media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
} */
</style>
